<template>
  <el-dialog title="选择图片" :visible.sync="_visible" :width="options.dialogWidth">
    <el-container direction="horizontal" style="height: 400px;">
      <!-- 左边的图片列表，start -->
      <el-main class="hui-p-0">
        <div class="hui-mb-1">
          <el-upload :action="options.uploadAction" :accept="options.uploadAccept" :show-file-list="false" :on-success="handleUploadSuccess" :before-upload="beforeUpload" style="display: inline-block;">
            <el-button size="medium" type="primary">上传新图片</el-button>
          </el-upload>
          <span class="hui-ml-1">可上传 jpg / png / gif 格式，单张图片大小不能超过 500K</span>
        </div>

        <el-radio-group v-model="_value" class="hui-dialog-image__radio-group">
          <el-radio :label="item" v-for="(item, index) in image.list" :key="index">
            <h-image :size="options.imageSize" :src="item" mode="background-image" border></h-image>
            <div class="hui-dialog-image__radio__cover" v-if="item === _value">
              <h-icon icon="icon-check" color="#ffffff" size="48px"></h-icon>
            </div>
          </el-radio>
        </el-radio-group>

        <!--分页，start-->
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="image.pages" :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next" :total="image.total" background class="hui-mt-1"></el-pagination>
        <!--分页，end-->
      </el-main>
      <!-- 左边的图片列表，end -->

      <!-- 右边的分组列表，start -->
      <el-aside width="150px" class="hui-dialog-image__tab  hui-scrollbar">
        <el-tabs v-model="imageGroupChecked" tab-position="right" type="card" @tab-click="handleTabClick">
          <el-tab-pane v-for="item in imageGroup" :key="item.id" :label="item.name" :name="item.id"></el-tab-pane>
        </el-tabs>
      </el-aside>
      <!-- 有变动分组列表，end -->
    </el-container>

    <div slot="footer" class="hui-text-right">
      <el-button @click="handleVisible" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * hpro-dialog-image
 * @module components/hpro-dialog-image
 * @desc 图片选择模态框（单选），可以上传
 *
 * @param { string } 选中的图片url，:value.sync或v-model绑定
 * @param { boolean } 模态框打开关闭
 */
export default {
  name: 'hpro-dialog-image',
  componentName: 'hpro-dialog-image',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String,
    visible: Boolean
  },
  computed: {
    _value: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('update:value', val)
        this.$emit('change', val)
      }
    },
    _visible: {
      get () {
        let visible = this.visible
        if (visible) {
          this.getImageGroup()
          this.getImage()
        }
        return this.visible
      },
      set (val) {
        if (val) {
          this.$emit('open')
        } else {
          this.$emit('close')
        }
        this.$emit('update:visible', val)
      }
    }
  },
  data () {
    return {
      options: {
        dialogWidth: '900px',
        imageSize: '120px',
        uploadAction: 'https://jsonplaceholder.typicode.com/photos/',
        uploadAccept: 'image/jpeg, image/jpg, image/png, image/gif'
      },
      image: {
        total: 0,
        pages: 0,
        list: []
      },
      imageGroup: [],
      imageGroupChecked: '',
      src: ''
    }
  },
  methods: {
    // 获取图片分组
    getImageGroup () {
      let group = []
      let i = 10
      while (i > 0) {
        group.push({
          id: '分组ID' + i,
          name: '分组名称' + i
        })
        i--
      }
      group.unshift({
        id: '',
        name: '全部图片'
      })
      this.imageGroup = group
    },

    // 获取图片列表
    getImage () {
      let total = 100
      let pages = this.image.pages
      let list = []
      let i = 10
      while (i > 0) {
        const img = this.$randomEnum(this.$store.state.image)
        list.push(img)
        i--
      }
      this.image.list = list
      this.image.total = total
      this.image.pages = pages + 1
    },

    // 分页事件
    handleCurrentChange () {
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },

    // 模态框打开关闭
    handleVisible () {
      let _visible = this._visible
      this._visible = !_visible
    },

    // 分组点击事件
    handleTabClick () {
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },

    // 上传成功事件
    handleUploadSuccess (res, file) {
      this.src = URL.createObjectURL(file.raw)
    },

    // 上传前校验
    beforeUpload (file) {
      const isImage = file.type === 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/gif'
      const isLimit500K = file.size / 1024 < 500
      if (!isImage) {
        this.$message.error('图片只能是 jpg / jpeg / png / gif 格式!')
      }
      if (!isLimit500K) {
        this.$message.error('单张图片大小不能超过 500K!')
      }
      return isImage && isLimit500K
    }
  }
}
</script>

<style lang="less">
@import '../../common/h-theme/_variable.less';
.hui-dialog-image__radio-group {
  .el-radio + .el-radio {
    margin-left: unset;
  }

  .el-radio {
    margin-right: 15px;
    margin-bottom: 15px;

    .el-radio__input {
      display: none;
    }
  }

  .el-radio__label {
    padding: 0;
  }
}

.hui-dialog-image__radio__cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .54);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
